﻿<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<script>
	var selectId = '';
	var datas = {};
	var dataUpdate = {};
	var addNews = "<span class='glyphicon glyphicon-plus'>&nbsp;</span>เพิ่มข่าวหน้าหลัก";
	var updateNews = "<span class='glyphicon glyphicon-pencil'>&nbsp;</span>แก้ไขข่าวหน้าหลัก";
	var ORDER_ADD = "ADD";
	var ORDER_UPDATE = "UPDATE";
	$(function(){
		$("#headerPanel").html(addNews);
		$("#description").focus();
		$("#newsOrder").val(ORDER_ADD);
		$(document).ready(function(){
			$.ajax({
	            url : '${pageContext.request.contextPath}/backend/news/getAll',
	            type: "POST",
	            async: false,
	            success : function(data) {
					if(data.success){
						var tbody = "";
						if(data.code === "0000"){
							datas = data.datas;
							$.each(data.datas, function(key, value) {
								var i=key;
								var status = "";
								if(value.status === 1){
									status = "ใช้งาน";
								}else{
									status = "ไม่ใช้งาน";
								}
								key = key + 1;
								tbody += "<tr>";
								tbody += "<td>" + key + "</td>";
								tbody += "<td>" + value.name + "</td>";
// 								tbody += "<td align='left'><img src='data:image/png;base64," + value.picture + "' width='250'/></td>";
// 								tbody += "<td align='left'>" + value.description + "</td>";
								tbody += "<td align='left'><a href='" + value.url + "' target='_blank' class='link'>" + value.url + "</a></td>";
								tbody += "<td>" + status + "</td>";
								tbody += "<td><span class='pointer-cursor' onclick='updateData("+i+")'><span class='glyphicon glyphicon-pencil'></span></span>&nbsp;&nbsp;" + 
									"<span class='pointer-cursor' data-toggle='modal' data-target='#myModal' onclick='deleteData("+value.id+")'><span class='glyphicon glyphicon-trash'></span></span></td>";
								tbody += "</tr>";
							});
						}else{
							tbody += "<tr>";
							tbody += "<td colspan='7' align='center' class='required'>" + data.msg + "</td>";
							tbody += "</tr>";
						}
						
						$("#tableNews tbody").append(tbody);
					}else{
	            		$.alertWithCode(data.code, data.msg);
					}
	            }
	        });
		});
		
		$("#btnCancel").click(function(){
			clearData();
			$("#headerPanel").html(addNews);
			$("#status").prop("checked", true);
			$("#newsOrder").val(ORDER_ADD);
		});
	});
		
	function updateData(key){
		dataUpdate = datas[key];
		$("#newsOrder").val(ORDER_UPDATE);
		$("#headerPanel").html(updateNews);
		$("#newsId").val(dataUpdate.id);
		$("#description").val(dataUpdate.description);
		$("#url").val(dataUpdate.url);
		$("#pictureLocation").text(dataUpdate.pictureLocation);
		$("#name").val(dataUpdate.name);

		if(dataUpdate.status === 1){		
			$("#status").prop("checked", true);
		}else if(dataUpdate.status === 0){
			$("#status").prop("checked", false);
		}
		
	}
		
	function deleteData(key){
		//dataUpdate = datas[key];
		selectId = key;
	}
		
	function validate(){
		if($("#newsOrder").val() === ORDER_ADD){
			if($("#name").val() === ""){
				$.alert("โปรดระบุหัวข้อข่าว");
				return false;
			}
			if($("#file").val() === ""){
				$.alert("โปรดระบุรูปภาพ");
				return false;
			}
		}
		return true;
	}
	
	function remove_item(){
		$.ajax({
            url : "${pageContext.request.contextPath}/backend/news/delete",
            //data: JSON.stringify(dataUpdate),
            data: {id: selectId},
            type: "POST",
	        //contentType: 'application/json',
	        //dataType: 'json',
	        //async: true,
            success : function(data) {
				if(data.success){
					if(data.code === "0000"){
            			$.alertWithCode(data.code, data.msg);
						window.location.reload(true);
					}else{
            			$.alertWithCode(data.code, data.msg);
					}
				}else{
            		$.alertWithCode(data.code, data.msg);
				}
            },
            error : function(data){
            	$.alertWithCode(data.code, data.msg);
            }
        });
        return false;
	}
	
	function clearData(){
		$("#newsOrder").val(ORDER_ADD);
		$("#headerPanel").html(addNews);
		$("#newsId").val("");
		$("#description").val("");
		$("#url").val("");
		$("#pictureLocation").text("");
		$("#name").val("");
	}
</script>

<div class="panel-box">
    <div class=titlebar>
        <span class="glyphicon glyphicon-list-alt"></span> ข่าวประชาสัมพันธ์
    </div>
    <div class="panel-body">
    	<table width="100%" id="tableNews" class="table table-striped">
			<thead>
				<tr class="info">
					<td width="50px">ลำดับ</td>
					<td width="200px">หัวข้อข่าว</td>
					<td width="200px">URL</td>
					<td width="100px">สถานะ</td>
					<td width="80px">Actions</td>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
    </div>
</div>

<div class="panel-box">
	<div class="titlebar" id="headerPanel"></div>
	<div class="panel-body">
		<div style="width: 700px">
			<form class="form-horizontal" action="${pageContext.request.contextPath}/backend/news/addOrUpdate" 
					onsubmit="return validate();" method="post" enctype="multipart/form-data">
			    <div class="form-group">
					<label class="col-sm-2 control-label" for="name">หัวข้อข่าว: </label>
    				<div class="col-sm-10">
						<input type="text" class="form-control" id="name" name="name">
					</div>
				</div>
			    <div class="form-group">
					<label class="col-sm-2 control-label" for="file">รูปภาพ: </label>
    				<div class="col-sm-10">
						<input type="file" accept="image/*" name="file" id="file"/><span id="pictureLocation"></span>
						<p class="help-block" style="color: red">*ขนาดรูปภาพควรเป็น 450px*450px</p>
					</div>
				</div>
			    <div class="form-group">
					<label class="col-sm-2 control-label" for="description">รายละเอียด: </label>
    				<div class="col-sm-10">
						<textarea rows="5" cols="100" class="form-control" id="description" name="description" style="overflow: auto; resize: none;"></textarea>
					</div>
				</div>
			    <div class="form-group">
					<label class="col-sm-2 control-label" for="url">URL: </label>
    				<div class="col-sm-10">
						<input type="text" class="form-control" id="url" name="url">
					</div>
				</div>
			    <div class="form-group">
					<label class="col-sm-2 control-label" for="status">สถานะ: </label>
    				<div class="col-sm-10">
					<input type="checkbox" id="status" name="status" checked="checked">
					</div>
				</div>
			
				<div style="margin-top: 10px;">
					<button class="btn btn-primary" type="submit" id="submit" name="submit">ตกลง</button>
					<button class="btn btn-default" type="button" id="btnCancel" name="btnCancel">ล้างข้อมูล</button>
				</div>
				<input type="hidden" id="newsId" name="newsId">
				<input type="hidden" id="newsOrder" name="newsOrder">
			</form>
		</div>
	</div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<form action="${pageContext.request.contextPath}/backend/news" onsubmit="return remove_item()" method="post" >
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">ต้องการลบข้อมูล?</h4>
				</div>
				<div class="modal-body">
					ยืนยันลบข้อมูล
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-primary">ตกลง</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">ปิด</button>
				</div>
			</div>
		</div>
	</form>
</div>

<!-- <div id="dlgDelete" style="display:none;">
	<form action="${pageContext.request.contextPath}/backend/news" onsubmit="return remove_item()" method="post" >
		<div class="fg-black" style="text-align: center;">
			<div style="margin: 30px; margin-top: 10px;">ต้องการลบข้อมูล?</div>
			<div>
				<button type="submit" class="button primary" id="btnDelete" name="btnDelete">ตกลง</button>
				<button class="button" type="button" onclick="$.Dialog.close()">ยกเลิก</button>
			</div>
		</div>
	</form>
</div>	-->
